<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!--登录和注册的模态框-->
<article th:fragment="bookModal">
    <!-- 登录模态框（Modal） -->
    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="loginModalLabel">
                        用户登录
                    </h4>
                </div>
                <div class="modal-body">
                    <!--登录的form表单-->
                    <form class="form-horizontal" id="loginForm" role="form" action="">
                        <div class="form-group has-feedback">
                            <label for="username" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-5">

                                <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
                                <span class="glyphicon glyphicon-user form-control-feedback"></span>
                            </div>
                            <div class="col-sm-3" id="noUser" style="padding-top: 10px;display: none">
                                <label class="alert-danger">用户名不存在</label>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <label for="password" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-5">
                                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
                                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                            </div>
                            <div class="col-sm-3" id="errorPwd" style="padding-top: 10px;display: none">
                                <label class="alert-danger">密码不正确</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <input type="button" class="btn btn-primary" value="登录" th:onclick="|login()|">
                        </div>
                    </form>
                    <!--form结束-->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
    </div>

    <!-- 注册模态框-->
    <div class="modal fade" id="registerModel" tabindex="-1" role="dialog" aria-labelledby="regModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="regModalLabel">
                        用户注册
                    </h4>
                </div>
                <div class="modal-body">
                    <!--注册的form表单-->
                    <form id="regForm" action="" class="form-horizontal" role="form">
                        <div class="form-group has-feedback">
                            <label for="regName" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-5">
                                <input type="text" id="regName" name="username" class="form-control" required placeholder="小写字母开头,不含中文." th:onblur="|checkUserName(this)|">
                                <span class="glyphicon glyphicon-user form-control-feedback"></span>
                            </div>
                            <div id="msg" class="col-sm-3" style="padding-top: 10px;display: none">
                                <label id="msgTitle" class="alert-danger">用户名不合法</label>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <label for="pwd" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-5">
                                <input type="password" id="pwd" name="password" class="form-control" required placeholder="密码长度6-8位" th:onblur="|checkPassword()|" minlength="6" maxlength="8">
                                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                            </div>
                            <div class="col-sm-3 pwd" style="padding-top: 10px;display: none">
                                <label class="alert-danger">密码不一致</label>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">确认密码</label>
                            <div class="col-sm-5">
                                <input type="password" id="rePwd" class="form-control" required minlength="6" maxlength="8" th:onblur="|checkPassword()|" placeholder="和密码保持一致">
                                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                            </div>
                            <div class="col-sm-3 pwd" style="padding-top: 10px;display: none">
                                <label class="alert-danger">密码不一致</label>
                            </div>
                        </div>

                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-5">
                                <input type="email" id="email" name="email" class="form-control" required placeholder="合法邮箱格式">
                                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                            </div>
                        </div>

                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">电话</label>
                            <div class="col-sm-5">
                                <input type="tel" id="phone" name="phone" class="form-control" required placeholder="合法手机格式">
                                <span class="glyphicon glyphicon-earphone form-control-feedback"></span>
                            </div>
                        </div>

                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">公司</label>
                            <div class="col-sm-5">
                                <input type="text" id="company" name="company" class="form-control" required placeholder="请输入公司地址">
                                <span class="glyphicon glyphicon-home form-control-feedback"></span>
                            </div>
                        </div>

                        <!--							<div class="form-group has-feedback">-->
                        <!--								<label class="col-sm-2 control-label">地址</label>-->
                        <!--								<div class="col-sm-5">-->
                        <!--									<input type="text" class="form-control" id="email" placeholder="请输入收货">-->
                        <!--									<span class="glyphicon glyphicon-home form-control-feedback"></span>-->
                        <!--								</div>-->
                        <!--							</div>-->

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <input id="regBtn" type="button" th:onclick="|register()|"  class="btn btn-primary" value="注册">
                        </div>
                    </form>
                    <!--form结束-->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
    </div>
</article>